<template>
  <div class="header-comp">
    <HeaderTime />
    <HeaderLeftComp />
    <div class="middle-comp">
      <div>安徽省消防大数据综合可视化展示平台</div>
    </div>
    <HeaderRightComp />
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from 'vue';
import HeaderTime from './time/index.vue';
import HeaderLeftComp from './left-comp/index.vue';
import HeaderRightComp from './right-comp/index.vue';

defineComponent({ name: 'HeaderIndex' });
</script>

<style scoped lang="scss">
.header-comp {
  @apply grid w-full h-[120px];
  grid-template-columns: 1fr 1028px 1fr;

  .middle-comp {
    @apply w-[1028px] h-full flex justify-center;
    background: url('./assets/header-middle.png') no-repeat center;

    div {
      @apply pt-[20px] text-[34px];
      font-family: DOUYU;
      background: linear-gradient(0deg, #31beff 0%, #81c5ff 0%, #effcfe 75.3173828125%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
</style>
